<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<jsp:include page="../common/bootstrap_vue.jsp"></jsp:include>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>vue</title>
</head>
<body>
	<h1>vue基本功能</h1>
	<div id="app">{{ message }}</div>
	<br>
	<br>
	<div id="app-2">
		<span v-bind:title="message">鼠标悬停几秒钟查看此处绑定的提示信息</span>
	</div>

	<br>
	<br>
	<div id="app-3">
		<p v-if="seen">现在看到我了</p>
	</div>

	<br>
	<br>
	<div id="app-4">
		<ol>
			<li v-for="todo in todos">{{todo.text}}</li>
		</ol>
	</div>

	<br>
	<br>
	<div id="app-5">
		<p>{{message}}</p>
		<button v-on:click="reverseMessage">逆转消息</button>
	</div>

	<br>
	<br>
	<div id="app-6">
		<p>{{message}}</p>
		<input v-model="message">
	</div>
	<script>
		var app = new Vue({
			el : '#app',
			data : {
				message : 'hello'
			}
		});

		var app2 = new Vue({
			el : '#app-2',
			data : {
				message : '页面加载于 ' + new Date().toLocaleString()
			}
		});

		var app3 = new Vue({
			el : '#app-3',
			data : {
				seen : true
			}
		});

		var app4 = new Vue({
			el : '#app-4',
			data : {
				todos : [ {
					text : 'javascript'
				}, {
					text : 'vue'
				}, {
					text : '整个项目'
				} ]
			}
		});

		var app2 = new Vue({
			el : '#app-5',
			data : {
				message : 'hello'
			},
			methods : {
				reverseMessage : function() {
					this.message = this.message.split('').reverse().join('');
				}
			}
		});

		var app6 = new Vue({
			el : '#app-6',
			data : {
				message : 'heool'
			}
		});
	</script>
</body>
</html>